template(name='topicItem')

	.ui-flex-row.ui-padded-sm.ui-bordered-bottom.ui-module

		.ui-padded-sm
			if user.profile.avatarUrl
				img.ui-image-circle.ui-image-avatar(src='{{user.profile.avatarUrl}}')
			else
				canvas(width='48' height='48' data-jdenticon-hash='{{user.profile.avatarHash}}')

		.ui-flex-column.ui-flex-1x.ui-padded-sm

			h3
				a(href='{{pathFor route="viewTopic"}}') {{title}}

			small {{desc}}

			.ui-flex-row(style='margin-bottom: 4px;')
				small.ui-text-mute {{user.username}} 发布于 {{fromNow createdAt}}

			.ui-flex-row

				.ui-flex-1x
					small(style='color: red;') {{left}}

				.ui-gap(style='width: 16px;')

				.ui-flex-1x
					small(style='color: blue;') {{right}}

		.ui-flex-column.ui-flex-center--child.ui-padded-sm

			small {{stats.views}} 浏览

			small {{stats.comments}} 讨论

			small {{stats.likes}} 喜欢

		.ui-flex-column.ui-flex-center--child

			.ui-flex-1x.ui-padded-sm(style='align-items: flex-start;')

				canvas.chart(width='48' height='48')
